import { reactive, ref, defineComponent } from 'vue';
import { CaretDownOutlined } from '@ant-design/icons-vue';
import './style/buttonGrounp.less';
export default defineComponent({
    name: 'AddConditionButton',
    props: {
        buttonType: {
            type: String,
            default: () => {
                return '';
            }
        }
    },
    emits: ['click'],
    setup(props, { emit }) {
        // 页面按钮可显示的map
        const buttonTextMap = reactive({
            AND: `添加${props.buttonType}(且)`,
            OR: `添加${props.buttonType}(或)`
        });
        // 页面按钮可选择的map
        const optionsMap = reactive({
            AND: `且${props.buttonType}`,
            OR: `或${props.buttonType}`
        });
        const selectedType = ref('AND');
        // 点击弹出选择框
        const handleButtonClick = () => {
            emit('click', selectedType.value);
        };
        // 点击选择类型 and / or
        const handleMenuClick = currentOption => {
            selectedType.value = currentOption.key;
            emit('click', selectedType.value);
        };
        // 下拉菜单
        const menu = (<aMenu onClick={handleMenuClick}>
        {Object.keys(optionsMap).map((key) => (<aMenuItem key={key}>
            <span class={['menu-item', selectedType.value === key ? 'menu-item-active' : '']}>{optionsMap[key]}</span>
          </aMenuItem>))}
      </aMenu>);
        return () => (<div>
        <aDropdownButton onClick={handleButtonClick} overlay={menu} icon={<CaretDownOutlined />} trigger="click">
          <span>{buttonTextMap[selectedType.value]}</span>
        </aDropdownButton>
      </div>);
    }
});
//# sourceMappingURL=AddConditionButton.jsx.map